<template>
  <div class="bp__panel-wrap">
    <div class="bp_panel-content" :class="`panel-${position}`">
      <el-scrollbar
        v-if="list.length"
        tag="ul"
        :wrap-class="wrapClass"
        view-class="el-select-dropdown__list"
        ref="scrollbar"
      >
        <li class="el-cascader-node bp-node" @click.stop="selectOptionClick({})">
          <span>全部区域</span>
        </li>
        <li
          v-for="(item, index) in list"
          :key="index"
          class="el-cascader-node bp-node"
          :class="{ 'is-active': item.id === addressCode }"
          @click.stop="selectOptionClick(item)"
        >
          <span>{{ item.geoName }}</span>
        </li>
      </el-scrollbar>
      <div v-else-if="!loading" class="bp__empty-text" @click="handleSelectEmpty">暂无数据</div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getAddressAuth } from '@/common/api/address'

export default {
  components: {},
  props: {
    value: String,
    position: {
      type: String,
      default: 'right',
    },
    wrapClass: {
      type: String,
      default: 'c-query-dropdown__wrap',
    },
  },
  data() {
    return {
      loading: false,
      list: [],
      addressCode: '',
    }
  },
  computed: {
    ...mapGetters(['user']),
  },
  watch: {},
  created() {
    this.addressCode = this.user.queryAddressCode
    this.getData()
  },
  mounted() {},
  methods: {
    getData(addressCode = this.addressCode, level = this.user.orgRegionLever) {
      this.loading = true
      getAddressAuth(addressCode, level)
        .then(res => {
          this.list = res || []
        })
        .finally(() => {
          this.loading = false
        })
    },
    selectOptionClick(val) {
      this.addressCode = val.id || ''
      this.$emit('input', this.addressCode)
      this.$emit('change', val)
      this.$emit('close')
    },
    handleSelectEmpty() {
      this.addressCode = ''
      this.$emit('close')
    },
  },
}
</script>

<style lang="scss" scoped>
@import './panel.scss';
</style>
